
import React from 'react'
import { connect } from 'react-redux';
import * as actionCreates from './store/actionCreates'

import { 
    DetailWrapper,
    Header,
    Content
} from './style'


class Detial extends React.Component{  

    render(){
        // console.log(this.props.match.params.id) //获取id
        // 根据id 不同 请求不同页面的内容
        return(
            <DetailWrapper>
                <Header>{this.props.titles}</Header>
                <Content dangerouslySetInnerHTML={{__html: this.props.contents}}> 
                </Content>
            </DetailWrapper>
        )
    }

    componentDidMount(){
        //这个是请求文章内容的 函数，现在可以根据id 请求不同的内容
        this.props.getContent(this.props.match.params.id)
    }
}


const mapState = (state) => ({
    titles: state.getIn(['detail', 'title']),
    contents: state.getIn(['detail', 'content'])   
})

const mapDicpatch =(dispatch) => ({
    getContent(id) {
        dispatch(actionCreates.handleContent(id))
    }
})


export default connect(mapState, mapDicpatch)(Detial)